<template>
  <view class="settings-page">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left">
        <uni-icons 
          type="left" 
          size="20" 
          color="#333333"
          @click="handleBack"
        />
      </view>
      <view class="nav-title">设置</view>
    </view>

    <!-- 主要内容区 -->
    <scroll-view class="content" scroll-y>
      <view class="settings-list">
        <view class="settings-item" @click="handleSettingClick">
          <text class="item-text">账号与安全</text>
          <uni-icons type="right" size="16" color="#CCCCCC"/>
        </view>
        <view class="settings-item" @click="handleSettingClick">
          <text class="item-text">隐私设置</text>
          <uni-icons type="right" size="16" color="#CCCCCC"/>
        </view>
        <view class="settings-item" @click="handleSettingClick">
          <text class="item-text">通用设置</text>
          <uni-icons type="right" size="16" color="#CCCCCC"/>
        </view>
        <view class="settings-item" @click="handleSettingClick">
          <text class="item-text">关于我们</text>
          <uni-icons type="right" size="16" color="#CCCCCC"/>
        </view>
      </view>

      <!-- 退出登录按钮 -->
      <view class="logout-wrapper">
        <button class="logout-button" @click="handleLogout">退出登录</button>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const handleBack = () => {
  uni.navigateBack();
};

const handleSettingClick = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  });
};

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '已退出登录',
          icon: 'success',
          duration: 2000
        });
      }
    }
  });
};
</script>

<style>
page {
  height: 100%;
  background-color: #F5F5F5;
}

.settings-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  border-bottom: 1px solid #EEEEEE;
  padding: 0 32rpx;
  flex-shrink: 0;
}

.nav-left {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #333333;
  font-weight: 500;
  margin-right: 20px;
}

.content {
  flex: 1;
  overflow: auto;
}

.settings-list {
  background-color: #FFFFFF;
  margin-top: 20rpx;
}

.settings-item {
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  border-bottom: 1px solid #EEEEEE;
}

.settings-item:last-child {
  border-bottom: none;
}

.item-text {
  font-size: 14px;
  color: #333333;
}

.logout-wrapper {
  margin: 60rpx 32rpx;
}

.logout-button {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #FFFFFF;
  border: 1px solid #EEEEEE;
  border-radius: 8rpx;
  font-size: 14px;
  color: #FF4D4F;
}

.logout-button:active {
  opacity: 0.8;
}
</style>
